<template>
	<view class="tab">
		<view class="tab-bg" :style="{ width: props.width }">
			<view
				class="tab-content"
				v-for="(item, index) in list"
				@click="changeAcitve(index)"
				:class="
					index === activeIndex
						? 'tab-content acitive'
						: 'tab-content'
				">
				<up-badge :isDot="true"></up-badge>
				<up-text :text="item.name" size="14"></up-text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const props = withDefaults(
	defineProps<{
		width?: string;
		list: chooseList[];
		Listindex: number;
		defaultVal: number | string;
		disabled?: false;
	}>(),
	{
		width: "100%",
	}
);
const activeIndex = ref(0);
const emit = defineEmits(["changeVal"]);
const changeAcitve = (index: number) => {
	if (props.disabled) return;
	activeIndex.value = index;
	emit("changeVal", index, props.Listindex);
};

watch(
	() => props.defaultVal,
	(val, oldVal) => {
		if (val && props.list.length) {
			const index = props.list?.findIndex((i) => i?.value === val) ?? -1;
			activeIndex.value = index >= 0 ? index : 0;
		}
	},
	{ immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.tab {
	width: 100%;
	.tab-bg {
		display: flex;
		background-color: #f5f6f7;
		border-radius: 36rpx;
		padding: 4rpx 8rpx;
		display: flex;
		gap: 8px;
	}
	.tab-content {
		border-radius: 28rpx;
		flex: 1;
		position: relative;
		:deep(.u-text__value) {
			width: 100%;
			justify-content: center;
		}
		:deep(.u-text__value) {
			color: rgba(0, 0, 0, 0.9);
			line-height: 27px;
			text-align: center;
		}
		:deep(.u-badge--dot) {
			position: absolute;
			left: 2px;
			top: 12px;
			background-color: #999;
			width: 5px;
			height: 5px;
		}
	}
	.acitive {
		background-color: #fff;
		:deep(.u-text__value) {
			color: #0066ff !important;
		}
		:deep(.u-badge--dot) {
			background-color: #0066ff;
		}
	}
}
</style>
